<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <title>SlickGrid example: 'Select2' javascript dropdown editor</title>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
  <link rel="stylesheet" href="../css/smoothness/jquery-ui.css" type="text/css" />
  <link rel="stylesheet" href="examples.css" type="text/css" />
  <link rel="stylesheet" href="../css/select2.css" type="text/css" />
  <style>
    .select2-container {
      top: -3px;
      left: -6px;
    }

    .select2-container .select2-selection--single {
      height: 26px;
    }
  </style>
</head>

<body>
  <div style="position:relative">
    <div style="width:600px;">
      <div id="myGrid" style="width:100%;height:500px;"></div>
    </div>

    <div class="options-panel">
      <h2>Demonstrates:</h2>
      <ul>
        <li>'Select2' javascript dropdown editor</li>
        <li>auto-edit settings</li>
      </ul>

      <h2>Options:</h2>
      <button onclick="grid.setOptions({autoEdit:true})">Auto-edit ON</button>
      &nbsp;
      <button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button>
      <h2>View Source:</h2>
      <ul>
        <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-select2-editor.html"
            target="_sourcewindow"> View the source for this example on Github</a></li>
      </ul>
    </div>
  </div>

  <script src="../lib/firebugx.js"></script>

  <script src="../lib/jquery-1.7.min.js"></script>
  <script src="../lib/jquery-ui.min.js"></script>
  <script src="../lib/jquery.event.drag-2.3.0.js"></script>

  <script src="../slick.core.js"></script>
  <script src="../plugins/slick.cellrangedecorator.js"></script>
  <script src="../plugins/slick.cellrangeselector.js"></script>
  <script src="../plugins/slick.cellselectionmodel.js"></script>
  <script src="../slick.formatters.js"></script>
  <script src="../slick.editors.js"></script>
  <script src="../slick.grid.js"></script>
  <script src="../lib/select2.js"></script>
  <script>
    var countryIsoAndNameList = {
      AF: 'Afghanistan',
      AX: 'Aland Islands',
      AL: 'Albania',
      DZ: 'Algeria',
      AS: 'American Samoa',
      AD: 'Andorra',
      AO: 'Angola',
      AI: 'Anguilla',
      AQ: 'Antarctica',
      AG: 'Antigua and Barbuda',
      AR: 'Argentina',
      AM: 'Armenia',
      AW: 'Aruba',
      AU: 'Australia',
      AT: 'Austria',
      AZ: 'Azerbaijan',
      BS: 'Bahamas',
      BH: 'Bahrain',
      BD: 'Bangladesh',
      BB: 'Barbados',
      BY: 'Belarus',
      BE: 'Belgium',
      BZ: 'Belize',
      BJ: 'Benin',
      BM: 'Bermuda',
      BT: 'Bhutan',
      BO: 'Bolivia',
      BA: 'Bosnia and Herzegovina',
      BW: 'Botswana',
      BV: 'Bouvet Island',
      BR: 'Brazil',
      IO: 'British Indian Ocean Territory',
      VG: 'British Virgin Islands',
      BN: 'Brunei Darussalam',
      BG: 'Bulgaria',
      BF: 'Burkina Faso',
      BI: 'Burundi',
      KH: 'Cambodia',
      CM: 'Cameroon',
      CA: 'Canada',
      CV: 'Cape Verde',
      KY: 'Cayman Islands',
      CF: 'Central African Republic',
      TD: 'Chad',
      CL: 'Chile',
      CN: 'China',
      CX: 'Christmas Island',
      CC: 'Cocos (Keeling) Islands',
      CO: 'Colombia',
      KM: 'Comoros',
      CG: 'Congo (Brazzaville)',
      CD: 'Congo, Democratic Republic of the',
      CK: 'Cook Islands',
      CR: 'Costa Rica',
      CI: 'Côte d\'Ivoire',
      HR: 'Croatia',
      CU: 'Cuba',
      CY: 'Cyprus',
      CZ: 'Czech Republic',
      DK: 'Denmark',
      DJ: 'Djibouti',
      DM: 'Dominica',
      DO: 'Dominican Republic',
      EC: 'Ecuador',
      EG: 'Egypt',
      SV: 'El Salvador',
      GQ: 'Equatorial Guinea',
      ER: 'Eritrea',
      EE: 'Estonia',
      ET: 'Ethiopia',
      FK: 'Falkland Islands (Malvinas)',
      FO: 'Faroe Islands',
      FJ: 'Fiji',
      FI: 'Finland',
      FR: 'France',
      GF: 'French Guiana',
      PF: 'French Polynesia',
      TF: 'French Southern Territories',
      GA: 'Gabon',
      GM: 'Gambia',
      GE: 'Georgia',
      DE: 'Germany',
      GH: 'Ghana',
      GI: 'Gibraltar',
      GR: 'Greece',
      GL: 'Greenland',
      GD: 'Grenada',
      GP: 'Guadeloupe',
      GU: 'Guam',
      GT: 'Guatemala',
      GG: 'Guernsey',
      GN: 'Guinea',
      GW: 'Guinea-Bissau',
      GY: 'Guyana',
      HT: 'Haiti',
      HM: 'Heard Island and Mcdonald Islands',
      VA: 'Holy See (Vatican City State)',
      HN: 'Honduras',
      HK: 'Hong Kong, Special Administrative Region of China',
      HU: 'Hungary',
      IS: 'Iceland',
      IN: 'India',
      ID: 'Indonesia',
      IR: 'Iran, Islamic Republic of',
      IQ: 'Iraq',
      IE: 'Ireland',
      IM: 'Isle of Man',
      IL: 'Israel',
      IT: 'Italy',
      JM: 'Jamaica',
      JP: 'Japan',
      JE: 'Jersey',
      JO: 'Jordan',
      KZ: 'Kazakhstan',
      KE: 'Kenya',
      KI: 'Kiribati',
      KP: 'Korea, Democratic People\'s Republic of',
      KR: 'Korea, Republic of',
      KW: 'Kuwait',
      KG: 'Kyrgyzstan',
      LA: 'Lao PDR',
      LV: 'Latvia',
      LB: 'Lebanon',
      LS: 'Lesotho',
      LR: 'Liberia',
      LY: 'Libya',
      LI: 'Liechtenstein',
      LT: 'Lithuania',
      LU: 'Luxembourg',
      MO: 'Macao, Special Administrative Region of China',
      MK: 'Macedonia, Republic of',
      MG: 'Madagascar',
      MW: 'Malawi',
      MY: 'Malaysia',
      MV: 'Maldives',
      ML: 'Mali',
      MT: 'Malta',
      MH: 'Marshall Islands',
      MQ: 'Martinique',
      MR: 'Mauritania',
      MU: 'Mauritius',
      YT: 'Mayotte',
      MX: 'Mexico',
      FM: 'Micronesia, Federated States of',
      MD: 'Moldova',
      MC: 'Monaco',
      MN: 'Mongolia',
      ME: 'Montenegro',
      MS: 'Montserrat',
      MA: 'Morocco',
      MZ: 'Mozambique',
      MM: 'Myanmar',
      NA: 'Namibia',
      NR: 'Nauru',
      NP: 'Nepal',
      NL: 'Netherlands',
      AN: 'Netherlands Antilles',
      NC: 'New Caledonia',
      NZ: 'New Zealand',
      NI: 'Nicaragua',
      NE: 'Niger',
      NG: 'Nigeria',
      NU: 'Niue',
      NF: 'Norfolk Island',
      MP: 'Northern Mariana Islands',
      NO: 'Norway',
      OM: 'Oman',
      PK: 'Pakistan',
      PW: 'Palau',
      PS: 'Palestinian Territory, Occupied',
      PA: 'Panama',
      PG: 'Papua New Guinea',
      PY: 'Paraguay',
      PE: 'Peru',
      PH: 'Philippines',
      PN: 'Pitcairn',
      PL: 'Poland',
      PT: 'Portugal',
      PR: 'Puerto Rico',
      QA: 'Qatar',
      RE: 'Réunion',
      RO: 'Romania',
      RU: 'Russian Federation',
      RW: 'Rwanda',
      SH: 'Saint Helena',
      KN: 'Saint Kitts and Nevis',
      LC: 'Saint Lucia',
      PM: 'Saint Pierre and Miquelon',
      VC: 'Saint Vincent and Grenadines',
      BL: 'Saint-Barthélemy',
      MF: 'Saint-Martin (French part)',
      WS: 'Samoa',
      SM: 'San Marino',
      ST: 'Sao Tome and Principe',
      SA: 'Saudi Arabia',
      SN: 'Senegal',
      RS: 'Serbia',
      SC: 'Seychelles',
      SL: 'Sierra Leone',
      SG: 'Singapore',
      SK: 'Slovakia',
      SI: 'Slovenia',
      SB: 'Solomon Islands',
      SO: 'Somalia',
      ZA: 'South Africa',
      GS: 'South Georgia and the South Sandwich Islands',
      SS: 'South Sudan',
      ES: 'Spain',
      LK: 'Sri Lanka',
      SD: 'Sudan',
      SR: 'Suriname *',
      SJ: 'Svalbard and Jan Mayen Islands',
      SZ: 'Swaziland',
      SE: 'Sweden',
      CH: 'Switzerland',
      SY: 'Syrian Arab Republic (Syria)',
      TW: 'Taiwan, Republic of China',
      TJ: 'Tajikistan',
      TZ: 'Tanzania *, United Republic of',
      TH: 'Thailand',
      TL: 'Timor-Leste',
      TG: 'Togo',
      TK: 'Tokelau',
      TO: 'Tonga',
      TT: 'Trinidad and Tobago',
      TN: 'Tunisia',
      TR: 'Turkey',
      TM: 'Turkmenistan',
      TC: 'Turks and Caicos Islands',
      TV: 'Tuvalu',
      UG: 'Uganda',
      UA: 'Ukraine',
      AE: 'United Arab Emirates',
      GB: 'United Kingdom',
      UM: 'United States Minor Outlying Islands',
      US: 'United States of America',
      UY: 'Uruguay',
      UZ: 'Uzbekistan',
      VU: 'Vanuatu',
      VE: 'Venezuela (Bolivarian Republic of)',
      VN: 'Viet Nam',
      VI: 'Virgin Islands, US',
      WF: 'Wallis and Futuna Islands',
      EH: 'Western Sahara',
      YE: 'Yemen',
      ZM: 'Zambia',
      ZW: 'Zimbabwe',
    };
    function PopulateSelect(select, dataSource, addBlank) {
      var index, len, newOption;
      if (addBlank) { select.appendChild(new Option('', '')); }
      $.each(dataSource, function (value, text) {
        newOption = new Option(text, value);
        select.appendChild(newOption);
      });
    };

  </script>
  <script>
    // stackoverflow.com/questions/2532218
    function pickRandomProperty(obj) {
      var result;
      var count = 0;
      for (var prop in obj)
        if (Math.random() < 1 / ++count)
          result = prop;
      return result;
    }

    function requiredFieldValidator(value) {
      if (value == null || value == undefined || !value.length) {
        return { valid: false, msg: "This is a required field" };
      } else {
        return { valid: true, msg: null };
      }
    }
    var grid;
    var data = [];
    var columns = [
      { id: "title", name: "Title", field: "title", width: 80, cssClass: "cell-title", editor: Slick.Editors.Text },
      { id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text },
      { id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date },
      { id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date },
      {
        id: "CountryOfOrigin", name: "Country Of Origin", field: "country", minWidth: 200, formatter: Slick.Formatters.Select2Formatter,
        editor: Slick.Editors.Select2Editor, dataSource: countryIsoAndNameList
      }
    ];
    var options = {
      editable: true,
      enableAddRow: true,
      enableCellNavigation: true,
      asyncEditorLoading: false,
      autoEdit: false
    };
    $(function () {
      for (var i = 0; i < 500; i++) {
        var d = (data[i] = {});
        d["title"] = "Task " + i;
        d["duration"] = "5 days";
        d["start"] = "01/01/2009";
        d["finish"] = "01/05/2009";
        d["country"] = pickRandomProperty(countryIsoAndNameList);
      }
      grid = new Slick.Grid("#myGrid", data, columns, options);
      grid.setSelectionModel(new Slick.CellSelectionModel());
      grid.onAddNewRow.subscribe(function (e, args) {
        var item = args.item;
        grid.invalidateRow(data.length);
        data.push(item);
        grid.updateRowCount();
        grid.render();
      });
    })
  </script>
</body>

</html>